<template>
	<view class="tabbar-container" :style="{height: bottomInsets + 'px'}">
		<view v-for="(item, index) in tabs" :key="index" class="tabbar-button" @click="handleTabbarClick(index)">
			<image :src="selectIndex === index ? item.selectedIcon : item.icon" class="tabbar-icon" mode="aspectFit" />
			<text class="tabbar-text">{{ item.text }}</text>
		</view>
		<view v-if="sharedState.notifications.messages > 0" class="mine-notif-tag" />
	</view>
</template>

<script setup lang="uts">
	import LoginManager from '@/pages/login/manager'
	import { useSharedManager } from '@/composables/useSharedManager';
	import { usePageLayout } from '@/utils/hooks/usePageLayout'
	import { onMounted } from 'vue';
	const {
		statusBarHeight,
		navHeight,
		contentWidth,
		contentHeight,
		topInsets,
		bottomInsets,
		updateLayout
	} = usePageLayout()

	const { sharedState } = useSharedManager();

	const props = defineProps<{
		selectIndex ?: number
	}>()

	const tabs = [
		{ text: '首页', page: '/pages/homepage/index', icon: '/static/image/tabbar/home.png', selectedIcon: '/static/image/tabbar/home-selected.png', login: false },
		{ text: '动态', page: '/pages/comment/index', icon: '/static/image/tabbar/comment.png', selectedIcon: '/static/image/tabbar/comment-selected.png', login: false },
		{ text: '排名', page: '/pages/rank/index', icon: '/static/image/tabbar/rank.png', selectedIcon: '/static/image/tabbar/rank-selected.png', login: false },
		{ text: '订单', page: '/pages/order/index', icon: '/static/image/tabbar/order.png', selectedIcon: '/static/image/tabbar/order-selected.png', login: true },
		{ text: '我的', page: '/pages/mine/index', icon: '/static/image/tabbar/mine.png', selectedIcon: '/static/image/tabbar/mine-selected.png', login: true }
	]

	onMounted(() => {
		updateLayout(true, true)
	})

	function handleTabbarClick(index : number) {
		const tab = tabs[index]
		// if (tab.login == true && !LoginManager.getInstance().isLogin()) return
		uni.switchTab({ url: tab.page as string })
	}
</script>

<style scoped>
	.tabbar-container {
		display: flex;
		justify-content: space-around;
		align-items: flex-start;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 1001;
		flex-direction: row;
		background-color: white;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
		/* 只在顶部加阴影 */
	}

	.tabbar-button {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 8px;
		flex: 1;
	}

	.tabbar-icon {
		width: 20px;
		height: 20px;
	}

	.tabbar-text {
		margin-top: 2px;
		font-size: 12px;
		color: #333;
	}

	.mine-notif-tag {
		position: fixed;
		width: 10px;
		height: 10px;
		border-radius: 5px;
		background-color: #CBAB7C;
		right: 6%;
		bottom: 85px;
	}
</style>